<template>
  <el-table :data="table.data"
    class="table-vm"
    height="650"
    maxHeight="650"
    stripe
    :show-summary="table.hasShowSummary"
    sum-text="总计"
    @selection-change="handleSelectionChange"
    v-loading="table.loading">
    <el-table-column v-if="table.hasSelect"
      type="selection"
      width="55">
    </el-table-column>
    <template v-for="col in table.tHead">
      <el-table-column v-if="col.show !== false && col.show === 'template'"
        :prop="col.prop"
        :key="col.id"
        :label="col.label"
        :width="col.width ? col.width : ''"
        :min-width="col.minWidth ? col.minWidth : ''"
        :sortable="table.sortable !== undefined ? table.sortable : true">
        <template slot-scope="scope">
          <slot :name="col.prop"
            :obj="scope" />
        </template>
      </el-table-column>
      <el-table-column v-else-if="col.show !== false && col.show !== 'template'"
        :prop="col.prop"
        :key="col.id"
        :label="col.label"
        :width="col.width ? col.width : ''"
        :min-width="col.minWidth ? col.minWidth : ''"
        :sortable="table.sortable !== undefined ? table.sortable : true">
      </el-table-column>

    </template>
    <!-- 自定义操作 -->
    <el-table-column column-key="operation"
      v-if="table.hasOperation"
      :label="table.operation.label"
      :width="table.operation.width ? table.operation.width : ''"
      :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
      :class-name="table.operation.className">
      <template slot-scope="scope">
        <el-button plain
          v-for="item in table.operation.data"
          :key="item.id"
          :class="item.classname? item.classname:''"
          :size="item.size"
          :type="item.btnType"
          @click="handleOperation(scope.$index, scope.row, item.id)">
          {{item.label}}
        </el-button>
      </template>
    </el-table-column>
    <!-- 自定义操作 -->
    <el-table-column column-key="operationOne"
      v-if="table.hasOperationOne"
      :label="table.operationOne.label"
      :width="table.operationOne.width ? table.operationOne.width : ''"
      :min-width="table.operationOne.minWidth ? table.operationOne.minWidth : ''"
      :class-name="table.operationOne.className">
      <template>
        <span plain
          v-for="item in table.operationOne.data"
          :key="item.id"
          :class="item.classname? item.classname:''"
          :size="item.size"
          :type="item.btnType">
          {{item.label}}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    table: {
      type: Object,
      default() {
        return {
          hasMergeRowOrColumn: false, // 是否合并单元格
          loading: false, // 加载中动画
          hasShowSummary: false, // 是否显示表位合计行
          border: false, // 是否带有纵向边框，默认为false
          hasSelect: false, // 有无选中功能
          hasOperation: false, // 有无操作功能
          hasOperationOne: false,
          hasExpand: false, // 有无展开行功能
          sortable: true, // 是否开启排序
          tHead: [
            {
              id: '1',
              label: 'label',
              prop: 'prop',
              className: 'className',
              width: '',
              minWidth: '80',
              show: true
            }
          ],
          data: [],
          operation: {
            label: '操作',
            width: '200',
            className: '',
            data: [
              {
                label: '编辑',
                Fun: 'handleEdit',
                id: '1',
                size: 'small',
                className: 'show'
              }
            ]
          }
        }
      }
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  created() {
    // console.log(this.table.operation.data)
    // console.log('是否排序', this.table)
    // console.log('table', this.table.data)
  },
  methods: {
    handleOperation(index, row, id) {
      const data = this.table.operation.data
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          this.$emit(data[i].Fun, index, row, id)
          // console.log(data[i].Fun, index, row)
        }
      }
    },
    filterHandler(value, row, column) {
      // console.log(column)
      const property = column['property']
      return row[property] === value
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('getOrderData', val)
      // console.log('this.multipleSelection :', this.multipleSelection)
    }
  }
}
</script>

<style scoped>
.table-vm {
  border: 1px solid #f4f4f5;
}
.el-table__header thead tr th {
    background: #f4f4f5;
  }
</style>